<template>
	<div class="commentBox">
		<div class="commentPic">
			<img :src="this.ip+'/'+info.userID.imgurl" />
		</div>
		<div class="commentRight">
			<div class="commentName">{{info.userID.name}}</div>
			<div class="commentTime">{{$dateFormate.dateFormate("YYYY-mm-dd HH:MM:SS",info.createTime)}}</div>
			<div class="commentInfo">{{info.text}}</div>
			<div class="commentTool">
				<div class="like"> <img src="../../static/dislike.png" width="15" /> {{info.like}}赞</div>
				<div class="commentComment"> <img src="../../static/comment.png" width="18" />回复</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['info']
	}
</script>

<style>
	.commentBox {
		display: flex;
		flex-direction: row;
		margin: 16px;
		width: 608px;
	}

	.commentBox .commentPic {
		width: 40px;
	}

	.commentBox .commentPic img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.commentBox .commentRight {
		margin-left: 10px;
	}

	.commentBox .commentRight .commentName {
		font-size: 15px;
		height: 20px;
		line-height: 20px;
	}

	.commentBox .commentRight .commentTime {
		font-size: 13px;
		height: 20px;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		color: #969696;
	}

	.commentBox .commentRight .commentInfo {
		margin-top: 15px;
		font-size: 16px;
		line-height: 18px;
	}

	.commentBox .commentRight .commentTool {
		display: flex;
		margin-top: 15px;
	}

	.commentBox .commentRight .commentTool .like,
	.commentBox .commentRight .commentTool .commentComment {
		height: 20px;
		line-height: 20px;
		font-size: 15px;
		color: #969696;
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		margin-right: 20px;
	}

	.commentBox .commentRight img {
		height: 15px;
		display: block;
		margin-right: 3px;
	}
</style>
